<template>
	<view>
		<!-- 订单导航 -->
		<order-nav :tabNavBars="tabNavBars" :activeIndex="activeIndex" navColor="#5290FF"
			@changeAct="changeOrderNavAct"></order-nav>

		<!-- 订单列表 -->
		<view v-for="(item, index) in tabNavBars" :key="index">
			<view v-if="index === activeIndex">
				<!-- 对应的订单列表详情 -->
				<!-- 全部 -->
				<view v-for="order in orders" :key="order.id" class="container" v-if="activeIndex == 0">
					<!-- 第一行 -->
					<view class="row">
						<text class="label">订单编号:</text>
						<text class="value">{{ order.id }}</text>
						<text @click="handleArrowClick(order.status)">></text>
					</view>
					<!-- 第二行 -->
					<view class="row">
						<text class="label">服务项目:</text>
						<text class="value">{{ order.service }}</text>
					</view>
					<!-- 第三行 -->
					<!-- #ifdef H5 -->
					<view class="row">
						<text class="label">服务门店:</text>
						<text class="value">{{ order.store }}</text>
						<text :class="getStatusClass(order.status)">{{ getStatusText(order.status) }}</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="row">
						<text class="label">服务门店:</text>
						<text class="value">{{order.store}}</text>
						<text class="getStatusClass(order.status)">{{ getStatusText(order.status) }}</text>
					</view>
					<!-- #endif -->
					<!-- 第四行 -->
					<view class="row">
						<text class="label">下单时间:</text>
						<text class="value">{{ order.orderTime }}</text>
					</view>
					<!-- 底边实线 -->
					<view class="divider"></view>
					<!-- 第五行 -->
					<view class="row bottom-row">
						<text class="label">实付:</text>
						<text class="value">{{ order.amount }}</text>
						<view class="buttons">
							<button v-if="showEvaluateButton(order.status)" class="btn1" @click="evaluate">立即评价</button>
							<button class="btn2">再来一单</button>
						</view>
					</view>
				</view>

				<!-- 待支付 -->
				<view class="container" v-if="activeIndex == 1">
					<!-- 第一行 -->
					<view class="row">
						<text class="label">订单编号:</text>
						<text class="value">24255252522</text>
						<text @click="handleArrowClick2">></text>
					</view>
					<!-- 第二行 -->
					<view class="row">
						<text class="label">服务项目:</text>
						<text class="value">车辆保养</text>
					</view>
					<!-- 第三行 -->
					<view class="row">
						<text class="label">服务门店:</text>
						<text class="value">大宝车辆维修店</text>
						<text class="status">待支付</text>
					</view>
					<!-- 第四行 -->
					<view class="row">
						<text class="label">下单时间:</text>
						<text class="value">2022-20-20 12:09</text>
					</view>
					<!-- 底边实线 -->
					<view class="divider"></view>
					<!-- 第五行 -->
					<view class="row bottom-row">
						<text class="label">实付:</text>
						<text class="value">200元</text>
						<view class="buttons">
							<button class="btn1" @click="orderCancel">取消订单</button>
							<button class="btn2" @click="pay">立即支付</button>
						</view>
					</view>
					<!-- 取消订单 -->
					<view v-if="orderPop" class="pop">
						<view class="popup-content">
							<text>确认要取消该订单吗？</text>
							<view class="buttons">
								<button class="buttons1" @click="confirmOrder">确认</button>
								<button class="buttons2" @click="cancelOrder">取消</button>
							</view>
						</view>
					</view>
					<!-- 立即支付 -->
					<view v-if="showPayPopup" class="popup">
						<view class="popup-content">
							<view class="close">
								<text @click="cancelPay">x</text>
							</view>
							<view><text>请输入支付密码</text></view>
							<text class="amount">支付金额:200</text>
							<!-- 这里可以添加支付方式选项 -->
							<!-- <view class="payment-methods">
									<text>支付方式</text>
								</view> -->
							<input type="password" v-model="password" placeholder="请输入密码" />
						</view>
					</view>
				</view>
				<!-- 待使用 -->
				<view class="container" v-if="activeIndex == 2">
					<!-- 第一行 -->
					<view class="row">
						<text class="label">订单编号:</text>
						<text class="value">24255252522</text>
						<text @click="handleArrowClick3">></text>
					</view>
					<!-- 第二行 -->
					<view class="row">
						<text class="label">服务项目:</text>
						<text class="value">车辆保养</text>
					</view>
					<!-- 第三行 -->
					<view class="row">
						<text class="label">服务门店:</text>
						<text class="value">大宝车辆维修店</text>
						<text class="status1">待使用</text>
					</view>
					<!-- 第四行 -->
					<view class="row">
						<text class="label">下单时间:</text>
						<text class="value">2022-20-20 12:09</text>
					</view>
					<!-- 底边实线 -->
					<view class="divider"></view>
					<!-- 第五行 -->
					<view class="row bottom-row">
						<text class="label">实付:</text>
						<text class="value">200元</text>
						<view class="buttons">
							<button class="btn1" @click="refundClick">申请退款</button>
							<button class="btn2" @click="handleScanCodeClick">扫码结算</button>
						</view>
					</view>
					<!-- 退款弹窗 -->
					<view v-if="showPop" class="pop">
						<view class="popup-content">
							<text>退款后会原路返回到支付账户，请确认是否退款吗？</text>
							<view class="buttons">
								<button class="buttons1" @click="confirmRefund">确认</button>
								<button class="buttons2" @click="cancelRefund">取消</button>
							</view>
						</view>
					</view>
					<!-- 扫码结算弹窗 -->
					<view v-if="showPopup" class="popup">
						<view class="popup-content">
							<text>使用凭证</text>
							<uqrcode ref="uqrcode" canvas-id="qrcode" value="sssss" size="93" :options="{ margin: 10 }">
							</uqrcode>
							<button class="close-btn" @click="handleClosePopup">x</button>
						</view>
					</view>
				</view>
				<!-- 待评价 -->
				<view class="container" v-if="activeIndex == 3">
					<!-- 第一行 -->
					<view class="row">
						<text class="label">订单编号:</text>
						<text class="value">24255252522</text>
						<text @click="handleArrowClick4">></text>
					</view>
					<!-- 第二行 -->
					<view class="row">
						<text class="label">服务项目:</text>
						<text class="value">车辆保养</text>
					</view>
					<!-- 第三行 -->
					<view class="row">
						<text class="label">服务门店:</text>
						<text class="value">大宝车辆维修店</text>
						<text class="status">待评价</text>
					</view>
					<!-- 第四行 -->
					<view class="row">
						<text class="label">下单时间:</text>
						<text class="value">2022-20-20 12:09</text>
					</view>
					<!-- 底边实线 -->
					<view class="divider"></view>
					<!-- 第五行 -->
					<view class="row bottom-row">
						<text class="label">实付:</text>
						<text class="value">200元</text>
						<view class="buttons">
							<button class="btn1" @click="evaluate">立即评价</button>
							<button class="btn2">再来一单</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import orderNav from '@/components/order/orderNav.vue';
	export default {
		name: 'Order',
		data() {
			return {
				isH5: typeof window !== 'undefined' && window.__wxjs_environment !== 'miniprogram',
				showPopup: false, // 控制弹窗显示的状态
				showPop: false,
				orderPop: false,
				showPayPopup: false,
				// 导航列表,思想啊！是把每种订单状态下对应订单列表直接组织到订单导航列表里了。
				tabNavBars: [{
						name: '全部',
						noOrderImg: '',
						noOrderTips: '您还没有订单哦~',
						list: ['这是全部订单列表'] //该订单状态下数据。
					},
					{
						name: '待支付',
						noOrderImg: '',
						noOrderTips: '',
						list: []
					},
					{
						name: '待使用',
						noOrderImg: '',
						noOrderTips: '您还没有待收货订单哦~',
						list: ['待收货订单列表']
					},
					{
						name: '待评价',
						noOrderImg: '',
						noOrderTips: '您还没有待评价订单哦~',
						list: []
					}
				],
				orders: [{
						id: '24255252522',
						service: '车辆保养',
						store: '大宝车辆维修店',
						orderTime: '2022-20-20 12:09',
						amount: '200元',
						status: '待评价' // 或 '已取消'
					},
					{
						id: '24255252522',
						service: '车辆保养',
						store: '大宝车辆维修店',
						orderTime: '2022-20-20 12:09',
						amount: '200元',
						status: '已取消' // 或 '已取消'
					},
					{
						id: '24255252522',
						service: '车辆保养',
						store: '大宝车辆维修店',
						orderTime: '2022-20-20 12:09',
						amount: '200元',
						status: '已退款' // 或 '已取消'
					},
					{
						id: '24255252522',
						service: '车辆保养',
						store: '大宝车辆维修店',
						orderTime: '2022-20-20 12:09',
						amount: '200元',
						status: '已完成' // 或 '已取消'
					},
					// 其他订单对象
				],
				statusTexts: {
					'待评价': '待评价',
					'已取消': '已取消',
					'已退款': '已退款',
					'已完成': '已完成'
				},
				orderStatus: '待使用', // 可能的值: '待评价' 或 '已取消'
				// 全部订单的索引下标 默认显示
				activeIndex: 0
			};
		},
		onLoad(query) {
			// 根据 URL 参数设置 activeIndex
			const tab = query.tab;
			if (tab === 'pay') {
				this.activeIndex = 1;
			} else if (tab === 'use') {
				this.activeIndex = 2;
			} else if (tab === 'say') {
				this.activeIndex = 3;
			}
		},
		components: {
			orderNav
		},
		methods: {
			//取消订单
			orderCancel() {
				this.orderPop = true;
			},
			confirmOrder() {
				this.orderPop = false;
			},
			cancelOrder() {
				this.orderPop = false;
			},
			//立即支付
			pay() {
				this.showPayPopup = true;
			},
			cancelPay() {
				this.showPayPopup = false;
			},
			//申请退款
			refundClick() {
				this.showPop = true; // 显示弹窗
			},
			confirmRefund() {
				this.showPop = false;
			},
			cancelRefund() {
				this.showPop = false;
			},

			//弹窗
			handleScanCodeClick() {
				this.showPopup = true; // 显示弹窗
			},
			handleClosePopup() {
				this.showPopup = false; // 隐藏弹窗
			},
			// 改变导航的激活样式根据索引下标
			changeOrderNavAct(index) {
				// console.log(index);
				// 改变导航的激活样式根据索引下标
				this.activeIndex = index;
			},
			//全部
			handleArrowClick(status) {
				let url;
				switch (status) {
					case '待评价':
						url = '/pages/my/myOrder/orderList/evaluation/evaluation';
						break;
					case '已取消':
						url = '/pages/my/myOrder/orderList/cancelled/cancelled';
						break;
					case '已退款':
						url = '/pages/my/myOrder/orderList/refund/refund'; // 需要根据实际路径更新
						break;
					case '已完成':
						url = '/pages/my/myOrder/orderList/finish/finish'; // 需要根据实际路径更新
						break;
					default:
						break;
				}
				uni.navigateTo({
					url: url
				});
			},
			getStatusClass(status) {
				switch (status) {
					case '待评价':
						return 'status';
					case '已取消':
						return 'status2';
					case '已退款':
						return 'status2';
					case '已完成':
						return 'status2';
					default:
						return 'status'; // 默认状态类
				}
			},
			getStatusText(status) {
				return this.statusTexts[status] || '未知状态'; // 默认值为 '未知状态'
			},
			showEvaluateButton(status) {
				return status === '待评价';
			},
			//待支付
			handleArrowClick2() {
				// 处理点击事件
				uni.navigateTo({
					url: '/pages/my/myOrder/orderList/payment/payment'
				});
			},
			//待使用
			handleArrowClick3() {
				// 处理点击事件
				uni.navigateTo({
					url: '/pages/my/myOrder/orderList/toUse/toUse'
				});
			},
			//待评价
			handleArrowClick4() {
				// 处理点击事件
				uni.navigateTo({
					url: '/pages/my/myOrder/orderList/evaluation/evaluation'
				});
			},
			//立即评价按钮点击
			evaluate() {
				// 处理点击事件
				uni.navigateTo({
					url: '/pages/my/evaluate/evaluate'
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #FFF;
	}

	// 无相关订单的时候
	.no-order {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 350rpx;

		.no-order-img {
			margin-top: 20rpx;
			width: 280rpx;
			height: 280rpx;
			border: solid 1rpx #e8e8e8;
		}

		.no-order-text {
			font-size: 20rpx;
			margin-top: 10rpx;
			color: #999999;
		}
	}

	//块
	.container {
		padding: 16px;
		border-bottom: 1px solid #999999;
		background-color: #FFF;
	}

	.row {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.label {
		font-weight: bold;
		margin-right: 8px;
	}

	.value {
		flex: 1;
	}

	.status {
		margin-left: auto;
		color: #ff5722;
		/* 或其他颜色以突出显示 */
	}

	.status1 {
		margin-left: auto;
		color: #007aff;
	}

	.status2 {
		margin-left: auto;
		color: #999999;
	}

	.divider {
		height: 1px;
		background-color: #e0e0e0;
		margin: 16px 0;
	}

	.bottom-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buttons {
		display: flex;
		gap: 8px;
	}

	.btn1 {
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		height: 40px;
		line-height: 25px;
		border: 1px solid #007aff;
		background-color: #FFF;
		/* 或其他颜色 */
		/* color: #999999; */
	}

	.btn2 {
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		height: 40px;
		line-height: 25px;
		background-color: #007aff;
		/* 或其他颜色 */
		color: white;
	}

	//申请退款
	.pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons1 {
		margin-top: 20px;
		height: 35px;
		line-height: 30px;
		border: 1px solid #007aff;
		background-color: #FFF;
	}

	.buttons2 {
		height: 35px;
		line-height: 30px;
		margin-top: 20px;
		background-color: #007aff;
		color: white;
	}

	//立即支付
	.popup-content {
		background: white;
		padding: 20px;
		border-radius: 8px;
		width: 80%;
		max-width: 400px;
	}

	.close {
		width: 30px;
		height: 30px;
		border: 1px solid #999999;
	}

	.close text {
		margin-left: 8px;
		line-height: 28px;
		font-size: 24px;
	}

	.amount {
		font-size: 24px;
		font-weight: bold;
		margin: 10px 0;
		margin-left: 25%;
	}

	.payment-methods {
		margin: 10px 0;
	}

	input {
		margin-top: 20px;
		width: 90%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	//弹窗
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		position: relative;
	}

	.close-btn {
		position: absolute;
		top: 0px;
		right: 0px;
		background: transparent;
		border: none;
		font-size: 15px;
	}
</style>